Mobx 🧊

API

1. @observable State（可观察状态）
2. @action（动作）
3. @computed: 用于定义基于可观察状态的衍生值，这些值会在相关状态变化时自动更新。
4. autorun: 自动运行一个函数，并在其依赖的可观察状态发生变化时重新运行。
5. when: 接受一个条件函数和一个副作用函数，当条件满足时执行副作用。
6. reaction: 更细粒度的控制，类似于 autorun，但允许你明确指定哪些可观察状态应该被追踪。
7. toJS: 将一个可观察对象转换为普通的 JavaScript 对象。
8. observe: 观察一个可观察对象的变化。
9. transaction: 在一个事务中批量更新多个状态，避免中间状态触发多次衍生。

一个简单的例子

import React from "react";
import ReactDOM from "react-dom";
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react";

// 对应用状态进行建模。
class Timer {
  secondsPassed = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increase() {
    this.secondsPassed += 1;
  }

  reset() {
    this.secondsPassed = 0;
  }
}

const myTimer = new Timer();

// 构建一个使用 observable 状态的“用户界面”。
const TimerView = observer(({ timer }) => (
  <button onClick={() => timer.reset()}>已过秒数：{timer.secondsPassed}</button>
));

ReactDOM.render(<TimerView timer={myTimer} />, document.body);

// 每秒更新一次‘已过秒数：X’中的文本。
setInterval(() => {
  myTimer.increase();
}, 1000);

参考链接

https://mobx.js.org/README.html